<template>
  <el-row>
    <el-col :span="10">
      <el-card class="box-card" :body-style="{ padding: '1px' }">
        <template #header>
          <div class="card-header">
            <span>可选</span>
          </div>
        </template>
        <div>
          <el-table
            ref="leftRef"
            :data="transferData.leftTableData.records"
            stripe
            size="small"
            fit
            height="450"
            :header-cell-style="{ background: '#F5F7FA', color: '#606266' }"
            @selection-change="selectionLeftChange"
          >
            <el-table-column type="selection" width="35" />
            <el-table-column v-for="(row, index) in transferData.titleData" :key="index" :label="row.label" :prop="row.name">
              <template #default="scope">
                <span>{{ row.formatter ? row.formatter(scope.row) : scope.row[row.name] }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page">
          <el-pagination
            small
            :default-page-size="2"
            v-model:current-page="leftPageData.page"
            v-model:page-size="leftPageData.size"
            layout="prev, pager, next"
            :total="leftPageData.total"
            :background="true"
            :pager-count="5"
            @size-change="handleLeftSizeChange"
            @current-change="handleLeftCurrentChange"
          />
        </div>
      </el-card>
    </el-col>
    <el-col :span="3">
      <el-row>
        <el-col :span="24">
          <el-button type="primary" icon="ArrowRight" @click="addRight"></el-button>
        </el-col>
        <el-col :span="24">
          <el-button type="danger" icon="ArrowLeft" @click="addLeft"></el-button>
        </el-col>
        <el-col :span="24">
          <el-button type="info" icon="RefreshLeft" @click="restAll"></el-button>
        </el-col>
      </el-row>
    </el-col>
    <el-col :span="10">
      <el-card class="box-card" :body-style="{ padding: '1px' }">
        <template #header>
          <div class="card-header">
            <span>已选</span>
          </div>
        </template>
        <div>
          <el-table
            ref="rightRef"
            :data="transferData.rightTableData"
            stripe
            size="small"
            height="493"
            :header-cell-style="{ background: '#F5F7FA', color: '#606266' }"
            @selection-change="selectionRightChange"
          >
            <el-table-column type="selection" width="35" />
            <el-table-column v-for="(row, index) in transferData.titleData" :key="index" :label="row.label" :prop="row.name">
              <template #default="scope">
                <span>{{ row.formatter ? row.formatter(scope.row) : scope.row[row.name] }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>
<script lang="ts" setup>
import Page from '@/components/Page.vue'
import { ElTable } from 'element-plus'
const transferData = reactive({
  titleData: ref([]),
  leftTableData: ref({}),
  rightTableData: ref([]),
  rightAllTableData: ref([]),
  leftSelectData: ref([]),
  rightSelectData: ref([])
})
const rightRef = ref<InstanceType<typeof ElTable>>()
const leftRef = ref<InstanceType<typeof ElTable>>()
const leftPageData = ref({ page: 1, size: 7, total: 0 })
let props = defineProps(['title', 'leftTable', 'rightTable'])
const emit = defineEmits(['update:leftTable', 'update:rightTable', 'selectLeftPage'])
onMounted(() => {
  dealData(true)
})
watch(
  () => props,
  value => {
    dealData(false)
  },
  { deep: true }
)
const dealData = (isFrist: boolean) => {
  let leftIds
  let rightIds
  if (props.title) {
    transferData.titleData = props.title
  }
  if (props.leftTable && props.leftTable.records) {
    leftIds = props.leftTable.records.map(s => s.id)
  }
  if (props.rightTable && isFrist) {
    rightIds = props.rightTable.map(s => s.id)
  }
  if (props.leftTable && props.leftTable.records) {
    transferData.leftTableData = props.leftTable
    leftPageData.value.page = props.leftTable.current
    leftPageData.value.size = props.leftTable.size
    leftPageData.value.total = props.leftTable.total
    const datas = transferData.leftTableData.records.filter((element, i) => rightIds.findIndex(ex => ex === element.id) > 0)
    console.log(datas)
    transferData.leftTableData.records
      .filter((element, i) => rightIds.findIndex(ex => ex === element.id) >= 0)
      .forEach(element => {
        leftRef.value.toggleRowSelection(element, undefined)
      })
  }
  if (props.rightTable && isFrist) {
    transferData.rightAllTableData = props.rightTable
    transferData.rightTableData = props.rightTable
    const datas = transferData.rightTableData.filter((element, i) => leftIds.findIndex(ex => ex === element.id) > 0)
    console.log(datas)
    transferData.rightTableData
      .filter((element, i) => leftIds.findIndex(ex => ex === element.id) >= 0)
      .forEach(element => {
        rightRef.value.toggleRowSelection(element, undefined)
      })
  }
}
const handleLeftSizeChange = (val: number) => {
  const leftTables = transferData.leftTableData
  leftTables.size = val
  leftTables.page = leftTables.current
  leftTables.records = []
  emit('update:leftTable', leftTables)
  emit('selectLeftPage')
}
const handleLeftCurrentChange = (val: number) => {
  const leftTables = transferData.leftTableData
  leftTables.page = val
  leftTables.records = []
  emit('update:leftTable', leftTables)
  emit('selectLeftPage')
}
const selectionLeftChange = (val: []) => {
  transferData.leftSelectData = val
}
const selectionRightChange = (val: []) => {
  transferData.rightSelectData = val
}
const addRight = () => {
  if (transferData.rightTableData) {
    const data = transferData.rightTableData.concat(transferData.leftSelectData)
    const res = new Map()
    transferData.rightTableData = data.filter((element, i) => !res.has(element.id) && res.set(element.id, 1))
  } else {
    transferData.rightTableData = transferData.leftSelectData
  }
  emit('update:rightTable', transferData.rightTableData)
}
const addLeft = () => {
  transferData.rightTableData = transferData.rightTableData.filter((element, i) => i !== transferData.rightSelectData.indexOf(element))
  emit('update:rightTable', transferData.rightTableData)
}
const restAll = () => {
  transferData.rightTableData = []
  if (transferData.rightAllTableData) {
    transferData.rightTableData = transferData.rightAllTableData
  }
}
</script>
<style lang="scss" scoped>
.el-table__cell {
  background: '#F5F7FA';
  color: '#606266';
  height: '10px';
  padding: '0px';
}
.el-button {
  margin: 10px;
  text-align: center;
}
.el-row {
  text-align: center;
  margin: 10px;
}
.el-col-24 {
  margin-top: 130px;
  height: 0px;
}
.el-pagination {
  margin-left: 40%;
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
